import React from 'react'
import { Tag as AntTag } from 'antd'
import styles from './index.module.less'
import { isFalsy } from '@/utils'
import { UnknownText } from '@/components'

export type Result = '失陷' | '成功' | '企图' | '失败'

interface AttackResultTagProps extends React.ComponentProps<typeof AntTag> {
  result: Result
  extra?: React.ReactNode
}

const colorMap: { [key in Result]: string } = {
  失陷: '#FF2340',
  成功: '#F9871D',
  企图: '#F0B11B',
  失败: '#A0A9C3'
}

export const AttackResultTag = ({ result, extra, style }: AttackResultTagProps) => {
  if (isFalsy(result)) return <UnknownText/>
  return (
    <AntTag
      className={`${styles['threat-result-tag']} threat-result-tag`}
      style={{
        backgroundColor: colorMap[result] || '#F0B11B',
        ...style
      }}
    >
      {result}
      {extra}
    </AntTag>
  )
}
